<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的修饰符</title>
</head>
<body>
<div id="app">
  <!--1、.stop 阻止事件冒泡-->
  <!--如果不加.stop，那么点击按钮，butClick和divClick都会在控制台被打印，添加之后，就只会打印butClick而阻止divClick的运行打印-->
  <div @click="divClick">
    <button @click="butClick">按钮1 v-on的.stop修饰符</button>
  </div>

  <hr>

  <!--2、.prevent阻止默认事件-->
  <!--如果不加.prevent，点击按钮A,会直接跳转到a标签指定的链接,如果添加.prevent修饰符，事件就会进入对应方法中，运行方法，这里会跳转到京东-->
  <button><a href="http://www.baidu.com/" @click="btnClick">按钮A</a></button>
  <button><a href="http://www.baidu.com/" @click.prevent="btnClick">按钮B</a></button>

  <hr>

  <!--3、.capture添加事件侦听器时使用capture模式(把默认的冒泡变为捕获)-->
  <!--正常情况下，点击 按钮2，程序运行顺序时先按钮事件方法，后div父节点的事件方法，控制台打印为：butClick -> divClick -->
  <!--在button父节点监听事件添加.capture修饰符，点击 按钮2 控制台打印的顺序为：divClick -> butClick，这种现象就是捕获-->
  <div @click.capture="divClick">
    <button @click="butClick">按钮2 v-on的.capture修饰符</button>
  </div>

  <hr>

  <!--4、.self只有事件是从侦听器绑定的元素本身触发时才触发回调-->
  <!--正常情况下，点击第三层show3，控制台会冒泡打印结果： 第三层-> 第二层 -> 第一层-->
  <!--在show2事件中，加上.self修饰符，然后点击第三层show3，控制台打印结果会是：第三层->第一层，因为第二层只有被准确点击到的时候，才会触发
   ，点击第二层show2后， 打印结果为：第二层 -> 第一层，因为第二层被准确点击到了，所以打印出来了，第一层时因为冒泡打印出来的-->
  <div style="background-color: red;height: 100px" @click="show1">
    第一层
    <div style="background-color: orange;height: 60px" @click.self="show2">
      第二层
      <div style="background-color: yellow;height: 20px" @click="show3">
        第三层
      </div>
    </div>
  </div>

  <hr>

  <!--5、..{keyCode | keyAlias} 用特定按键触发事件-->
  <!--在第一个input中，按回车键，控制台输出keyCode
  在第二个input中，按right键，控制台输出keyAlias-->
  <!-- 使用KeyCode 13代表enter键 -->
  <input type="text" v-on:keydown.13="keyCode"/><br/>
  <!-- 使用别名，right代表方向键右 -->
  <input type="text" v-on:keydown.right="keyAlias"/>

  <hr>

  <!--6、.native监听组件根元素的原生事件。-->
  <!--使用native修饰符需要先创建一个自定义组件，然后在html中调用组件时，再使用。
      如果组件中的v-on:click事件不加.native,那么点击是无效的，控制台不会出现任何内容。-->
  <mycomponent v-on:click.native="myfn"></mycomponent>

  <hr>

  <!--7、.once 只触发一次回调。-->
  <!--被.once修饰的事件只能被触发一次,后边在被点击就没有作用了-->
  <button @click.once="onceClick">按钮7 .once修饰符</button>

  <hr>

  <!--8、left | middle | right 鼠标的左键 中键 右键触发的事件-->
  <!--鼠标左键点击AAA，控制台打印：left
  鼠标中键点击BBB，控制台打印：middle
  鼠标右键点击CCC，控制台打印：right，除指定键可出发之外，其他一律不能触发事件-->
  <div v-on:mousedown.left="left">AAA</div>
  <div v-on:mousedown.middle="middle">BBB</div>
  <div v-on:mousedown.right="right">CCC</div>

</div>
<script src="../js/vue.js"></script>
<script>
  // 自定一组件 mycomponent
  Vue.component('mycomponent', {
    template: `<button style="color: darkmagenta">点我</button>`
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue'
    },
    methods: {
      divClick() {
        console.log('divClick');
      },
      butClick() {
        console.log('butClick');
      },
      btnClick() {
        console.log('btnClick');
        window.location = 'http://www.jd.com/';
      },
      show1() {
        console.log('第一层');
      },
      show2() {
        console.log('第二层');
      },
      show3() {
        console.log('第三层');
      },
      keyCode() {
        console.log('keyCode');
      },
      keyAlias() {
        console.log('keyAlias');
      },
      myfn() {
        console.log('myfn');
      },
      onceClick() {
        console.log('onceClick');
      },
      left() {
        console.log('left');
      },
      middle() {
        console.log('middle');
      },
      right() {
        console.log('right');
      }

    }
  });
</script>
</body>
</html>
